import React, {useEffect} from 'react';
import styled from 'styled-components';
import Select, { components } from 'react-select'
import OptionSection from './OptionSection';
import Icon from './Icon';

const SelectWrapper = styled.div`
    width: 65vw;
    padding: 0 10px;
`

const selectStyles = {
    control: (provided: any) => ({
        ...provided,
        border: "0px solid #FD9A16",
        fontSize: '1.2em',
        backgroundColor: 'white',
        outline: 'none'
    }),
    singleValue: (styles: any) => ({
        ...styles,
        textAlign: 'center',
        color: '#FD9A16'
    }),
    menu: (styles: any) => ({ ...styles, zIndex: 999 })
}

const DropdownIndicator = (props: any) => {
    return (
        <components.DropdownIndicator {...props}>
                <Icon name="select"/>
        </components.DropdownIndicator>
    );
};

export const outComeCategoryOptions:{value: string, label: string}[] = [
    { value: 'clothes', label: '衣服饰品' },
    { value: 'drink', label: '食品酒水' },
    { value: 'home', label: '居家物业' },
    { value: 'traffic', label: '行车交通'},
    { value: 'communication', label: '交流通讯'},
    { value: 'entertainment', label: '休闲娱乐'},
    { value: 'study', label: '学习进修'},
    { value: 'relationships', label: '人情往来'},
    { value: 'hospital', label: '医疗保健'},
    { value: 'insurance', label: '金融保险'},
    { value: 'otherOutcome', label: '其他支出'}
]

export const incomeCategoryOptions:{value: string, label: string}[] = [
    { value: 'salary', label: '工资收入'},
    { value: 'overTime', label: '加班收入'},
    { value: 'investment', label: '投资收入'},
    { value: 'partTime', label: '兼职收入'},
    { value: 'redPacket', label: '红包收入'},
    { value: 'accident', label: '意外收入'},
    { value: 'otherIncome', label: '其他收入'},
]

type Props = {
    selectedType: 'outcome' | 'income'
    selectedCategory: string | undefined,
    onSelectedCategoryChange: Function
}

const Category:React.FC<Props> = (props) => {

    function handleChange(event: any) {
        props.onSelectedCategoryChange(event.value)
    }

    useEffect(() => {
        props.onSelectedCategoryChange((props.selectedType === 'outcome' ? outComeCategoryOptions[0] : incomeCategoryOptions[0]).value)
    }, []);

    return (
        <OptionSection iconName="category" labelName="类别">
            <SelectWrapper>
                <Select
                    key={props.selectedType}
                    defaultValue={props.selectedType === 'outcome' ? outComeCategoryOptions[0] : incomeCategoryOptions[0]}
                    isSearchable = {false}
                    onChange={handleChange}
                    // onInputChange={handleInputChange}
                    components={{ DropdownIndicator }}
                    options={props.selectedType === 'outcome' ? outComeCategoryOptions : incomeCategoryOptions}
                    styles={selectStyles}
                    theme={theme => ({
                        ...theme,
                        colors: {
                            ...theme.colors,
                            primary25: '#FD9A1660',
                            primary: '#FD9A16',
                        },
                    })}
                />
            </SelectWrapper>
        </OptionSection>
    );
}

export default Category;